<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>车辆地图</title>
<%@include file="\refers.jsp" %>
<script type="text/javascript" src="<%=basePath%>ext3.4/ux/ux-all.js"></script>
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js" ></script>  
<script type="text/javascript">
var maps;
var bgpStore;
var bgpStore2;
//单独查看设备所用的标记，和定时器
var carMark;
var carMarkInfo;
var timer;

//自动巡航用的标记和定时器还有车辆数组
var carArray  ;
var carArrayNum ;
var timer02;
var zanting = false;

function xunHang(devName,devType,devUnit){
	zanting = false;
	
	if(!Ext.isEmpty(timer)){
		window.clearTimeout(timer);
	}
	if(!Ext.isEmpty(timer02)){
		window.clearTimeout(timer02);
	}
	Ext.Ajax.request({
		url:'<%=basePath%>carMapInfo/getDevListForXunHang.action',
		params:{
			devName : devName,
			devType : devType,
			devUnit : devType
		},
		success:function(resp){
			carArray = Ext.util.JSON.decode(resp.responseText);
			if(carArray.length>0){
				carArrayNum = 0;
				shouXunHang();
			}else{
				Ext.Msg.alert('提示','无法查找到任何车辆');
			}
		},
		failure:function(){
			Ext.Msg.alert('提示','连接失败，请检查网络');
		}
	});
}

function shouXunHang(){
	if(carArray.length>0){
		if(carArrayNum>=carArray.length){
			carArrayNum = 0;
		}else if(carArrayNum<0){
			carArrayNum = carArray.length -1;
		}
		Ext.Ajax.request({
			url:'<%=basePath%>carMapInfo/getRecentDevInfoByDevNum.action',
			params:{
				devNum:carArray[carArrayNum]
			},
			success:function(resp){
				var text = Ext.util.JSON.decode(resp.responseText);
				if(text.length==1){
					var obj = text[0];
					var jingdu = obj.jingdu * 100000;
					var weidu = obj.weidu * 100000;
					var point  = new LTPoint( jingdu , weidu );
	
					maps.moveToCenter(point );
					maps.zoomTo (4) ;
					maps.clearOverLays();
					
					var icon = new LTIcon();
					icon.setImageUrl( "<%=basePath%>images/carImg.jpg" );
					
					var mark01 = new LTMarker( point,icon );
					maps.addOverLay(mark01);
					var info01 = new LTInfoWindow(point);
					info01.setTitle("<h2>"+obj.devCode+"</h2>");
				    info01.setLabel("<p>名称："+obj.devName+"</p><p>规格："+obj.devSpi+"&nbsp;&nbsp;&nbsp;&nbsp;单位:"+obj.ownUnit+" </p><p>定位时间："+obj.endTime+"</p><p><a href='javascript:void(0);' onclick='pre();'>上一步</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick='suspend();'>暂停</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick='next();'>下一步</a></p>");   
				    maps.addOverLay( info01 );
				    LTEvent.addListener( mark01 , "click" , function(){
						  maps.addOverLay( info01 );
					});
					if(!zanting){
						carArrayNum++;
					}
					timer02 = window.setTimeout("shouXunHang()",5000);
				}
			}
		});
	}
}

function next(){
	window.clearTimeout(timer02);
	shouXunHang();
}

function pre(){
	window.clearTimeout(timer02);
	carArrayNum-=2;
	shouXunHang();
}

function suspend(){
	carArrayNum--;
	zanting = true;
}

function  currentCoordinates(devNum,flag){
	if(!Ext.isEmpty(timer)){
		window.clearTimeout(timer);
	}
	if(!Ext.isEmpty(timer02)){
		window.clearTimeout(timer02);
	}
	Ext.Ajax.request({
		url:'<%=basePath%>carMapInfo/getRecentDevInfoByDevNum.action',
		params:{
			devNum:devNum
		},
		success:function(resp){
			var text = Ext.util.JSON.decode(resp.responseText);
			if(text.length==1){
				var obj = text[0];
				var jingdu = obj.jingdu * 100000;
				var weidu = obj.weidu * 100000;
				var point  = new LTPoint( jingdu , weidu );

				if(flag){
					maps.moveToCenter(point );
					maps.zoomTo (4) ;
					maps.clearOverLays();
				}
				var icon = new LTIcon();
				icon.setImageUrl( "<%=basePath%>images/carImg.jpg" );
				if(!Ext.isEmpty(carMark)){
					maps.removeOverLay(carMark,true);
					maps.removeOverLay(carMarkInfo,true);
				}
				carMark = new LTMarker( point,icon );
				maps.addOverLay(carMark);
				carMarkInfo = new LTInfoWindow(point);
				carMarkInfo.setTitle("<font size=3><strong>"+obj.devCode+"</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick='selectTimeWin(\""+devNum+"\");'><font size='2'>查看完整路径</font></a>");
			    carMarkInfo.setLabel("<p>名称："+obj.devName+"</p><p>规格："+obj.devSpi+"&nbsp;&nbsp;&nbsp;&nbsp;单位:"+obj.ownUnit+" </p><p>定位时间："+obj.endTime+"</p>");   
			    maps.addOverLay( carMarkInfo );
			    LTEvent.addListener( carMark , "click" , function(){
					  maps.addOverLay( carMarkInfo );
				});
				timer = window.setTimeout("currentCoordinates("+devNum+",false)",30000);
			}else{
				Ext.Msg.alert("提示",'导航失败，请尝试重新查找');
			}
		},
		failure:function(){
			Ext.Msg.alert("提示",'导航失败，请尝试重新查找');
		}
	});


	bgpStore.reload({
		params:{
			devNum : devNum
		}
	});
	bgpStore2.reload({
		params:{
			devNum : devNum
		}
	});
}

function selectTimeWin(devNum){
	var timeForm = new Ext.form.FormPanel({
			id : 'timeForm',
			name : 'timeForm',
			defaultType : 'datefield',
			labelAlign : 'right',
			labelWidth : 65,
			bodyStyle : 'padding:5 5 5 5',
			frame : false,
			items : [{
						fieldLabel:'开始日期',
						allowBlank : false,
						id:'startTime',
						format:'Y-m-d',
						anchor : '99%'
					},{
						fieldLabel : '结束日期',
						id : 'endTime',
						allowBlank : false,
						format:'Y-m-d',
						anchor : '99%'
					}]
		});
	
	var timeWin = new Ext.Window({
					layout : 'fit',
					width : 280,
					height : 130,
					resizable : false,
					draggable : false,
					closeAction : 'close',
					title : '<span style="font-weight:normal">选择时间</span>',
					modal : true,
					collapsible : false,
					maximizable : false,
					buttonAlign : 'right',
					border : false,
					animCollapse : true,
					constrain : true,
					items : [timeForm],
					buttons:[{
						text : '查找',
						iconCls : 'acceptIcon',
						handler : function() {
							if(timeForm.form.isValid()){
								Ext.Ajax.request({
									url:'<%=basePath%>carMapInfo/getDevPointsByDevNum.action',
									params:{
										devNum : devNum,
										startTime : Ext.util.Format.date(Ext.getCmp('startTime').getValue(),'Y-m-d H:i:s'),
										endTime : Ext.util.Format.date(Ext.getCmp('endTime').getValue(),'Y-m-d H:i:s')
									},
									success:function(resp){
										var text = Ext.util.JSON.decode(resp.responseText);
										if(text.length<1){
											Ext.Msg.alert('提示',"没有查到此车辆的任何运行轨迹");
										}else{
											var points = new Array();
											for(var n=0;n<text.length;n++){
												var p = new LTPoint( text[n].jingdu*100000 , text[n].weidu*100000 );
												var icon=new LTIcon("<%=basePath%>images/poi04.gif",[20,32]);
												var m = new LTMarker( p,icon );
												LTEvent.addListener(m,"click",function(){
													//m.openInfoWinUrl( "定位时间：" + text[n].time );
												});
												maps.addOverLay(m);
												points.push(p);  
											}
											var option = new LTLineOptions();
											option.points = points;
											var polyLine = new LTLineOverlay( option ); 
    										maps.addOverLay( polyLine );
										}
										timeWin.destroy();
									},
									failure:function(){
										Ext.Msg.alert('提示','查找失败，请检查网络');
									}
								});
							}else{
								Ext.Msg.alert('提示','请将时间填写完整');
							}
						}
					},{
						text:'关闭',
						iconCls : 'acceptIcon',
						handler:function(){
							timeWin.destroy();
						}
					}]
				});
		timeWin.show();
}
Ext.onReady(function(){
	maps = new LTMaps( "map" );  
	maps.cityNameAndZoom( "jinan" , 8 ); 
	maps.handleMouseScroll();
	var control = new LTStandMapControl();  
    maps.addControl( control ); 
    
    
    /**
	 * 左侧查找框
	 */
    var fp=new Ext.form.FormPanel({ 
        width:220,
        autoHeight:true,
        bodyStyle:"padding:5px 5px 0",
        frame:false,
        border:false,
        labelWidth : 60,
        defaultTyle:'textfield',
        items:[{
            fieldLabel:"设备名称",
            xtype:"textfield",
            name:"devName",
            id:"devName",
            value:'',
            width:140
        },{
            fieldLabel:"设备规格",
            xtype:"textfield",
            name:"devType",
            id:"devType",
            value:'',
            width:140
        },{
        	fieldLabel:"归属单位",
            xtype:"textfield",
            name:"devUnit",
            id:"devUnit",
            value:'',
            width:140
        }],
        buttons:[{
        	text:'自动巡航',
        	handler:function(){
        		xunHang(Ext.getCmp('devName').getValue(),Ext.getCmp('devType').getValue(),Ext.getCmp('devUnit').getValue());
        	}
        },'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',{
        	text:'查找',
        	handler:function(){
        		lgpStore.reload({
					params:{
						devName : Ext.getCmp('devName').getValue(),
						devType : Ext.getCmp('devType').getValue(),
						devUnit : Ext.getCmp('devUnit').getValue()
					}
				});
        	}
        }]
    }); 
    
    
    /**
	 * 左侧车辆列表
	 */
	var lgpStore = new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({
			url:'<%=basePath%>carMapInfo/getDevGroupList.action'
		}),
		reader:new Ext.data.JsonReader({
			root:'items'
		},[{
			name:'devNum'
		},{
			name:'devName'
		},{
			name:'devType'
		},{
			name:'devUnit'
		}]),
		autoLoad:true
	});
    var lgp = new Ext.grid.GridPanel({
    	flex: 10,
    	store:lgpStore,
		border:true,
		bodyStyle:'margin-bottom:10px;',
		enableColumnMove:false,
		stripeRows:true,
		loadMask:true,
		border:false,
		autoScroll:true,
		columns : [{
			header : '设备编号',
			dataIndex : 'devNum',
			sortable : true,
			width:90,
			renderer:function(value){
				return '<a href="javascript:void(0);" onclick="currentCoordinates(\''+value+'\',true);" title="点击查看车辆当前位置">'+value+'</a>';
			}
		},{
			header : '设备名称',
			dataIndex : 'devName',
			sortable : true,
			width:90
		},{
			header : '设备规格',
			dataIndex : 'devType',
			sortable : true,
			width:90
		},{
			header : '归属单位',
			dataIndex : 'devUnit',
			sortable : true,
			width:95
		}]
    });
    
	
	/**
	*下部信息列表
	*/
	bgpStore = new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({
			url:'<%=basePath%>carMapInfo/getRecentDevInfoByDevNum.action'
		}),
		reader:new Ext.data.JsonReader({
		},[{
			name:'id'
		},{
			name:'devCode'
		},{
			name:'devName'
		},{
			name:'devSpi'
		},{
			name:'ownUnit'
		},{
			name:'tn'
		},{
			name:'startTime'
		},{
			name:'endTime'
		},{
			name:'runTime'
		},{
			name:'runDistance'
		},{
			name:'weidu'
		},{
			name:'jingdu'
		},{
			name:'youhao'
		},{
			name:'luwen'
		}]),
		autoLoad:false
	});
	var bgp = new Ext.grid.GridPanel({
		title:'位置信息',
    	store:bgpStore,
		border:true,
		bodyStyle:'margin-bottom:10px;',
		enableColumnMove:false,
		stripeRows:true,
		loadMask:true,
		border:false,
		autoScroll:true,
		columns : [{
			header:'ID',
			dataIndex:'id',
			hidden:true
		},{
			header : '设备编号',
			dataIndex : 'devCode'
		},{
			header : '设备名称',
			dataIndex : 'devName'
		},{
			header : '设备规格',
			dataIndex : 'devSpi'
		},{
			header : '归属单位',
			dataIndex : 'ownUnit'
		},{
			header : '通信号码',
			dataIndex : 'tn'
		},{
			header : '开始时间',
			dataIndex : 'startTime',
			width:150
		},{
			header : '停止时间',
			dataIndex : 'endTime',
			width:150
		},{
			header : '运行时间',
			dataIndex : 'runTime'
		},{
			header : '运行里程',
			dataIndex : 'runDistance'
		},{
			header : '当前维度',
			dataIndex : 'weidu'
		},{
			header : '当前经度',
			dataIndex : 'jingdu'
		},{
			header : '发动机油耗',
			dataIndex : 'youhao'
		},{
			header : '油路温度',
			dataIndex : 'luwen'
		}]
    });
    
    bgpStore2 = new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({
			url:'<%=basePath%>carMapInfo/getTodaySummaryByDevNum.action'
		}),
		reader:new Ext.data.JsonReader({
		},[{
			name:'devCode'
		},{
			name:'devName'
		},{
			name:'devSpi'
		},{
			name:'ownUnit'
		},{
			name:'totalRunTime'
		},{
			name:'totalDistance'
		},{
			name:'totalYouhao'
		}])
	});
	var bgp2 = new Ext.grid.GridPanel({
		title:'当日汇总',
    	store:bgpStore2,
		border:true,
		bodyStyle:'margin-bottom:10px;',
		enableColumnMove:false,
		stripeRows:true,
		loadMask:true,
		border:false,
		autoScroll:true,
		columns : [{
			header : '设备编号',
			dataIndex : 'devCode'
		},{
			header : '设备名称',
			dataIndex : 'devName'
		},{
			header : '设备规格',
			dataIndex : 'devSpi'
		},{
			header : '归属单位',
			dataIndex : 'ownUnit'
		},{
			header : '当天运行时间',
			dataIndex : 'totalRunTime'
		},{
			header : '当天运行里程',
			dataIndex : 'totalDistance'
		},{
			header : '当天油耗',
			dataIndex : 'totalYouhao'
		}]
    });
    
    
	/**
	 * 布局
	 */
	var viewport = new Ext.Viewport({
		layout : 'border',
		items : [{
			title:'搜索框',
			region:'west',
			width:220,
			//collapsible: true,
			layout:{
				type: 'vbox',
				align: 'center'
			},
			items:[fp,lgp]
		},{
			region:'center',
			layout:{
				type: 'vbox',
				align: 'center'
			},
			items:[{
				xtype: 'panel',
				width: '100%',
				flex: 10,
				border:false,
				contentEl:'map'
			},{
				xtype: 'tabpanel',
				activeTab:0,
				width: '100%',
				height:120,
				items:[bgp,bgp2]
			}]
		}]
	});
	viewport.doLayout();
});
</script>
</head>
<body>
<div id="map" style="position:relative; width:100%; height:100%;"></div>
</body>
</html>
